<template>
  <div class="navbar">
    <div class="navbar-left">
      <div class="navbar-avatar" v-if="user.avatar!==''" @click="goMyhome">
        <img :src="user.avatar" alt="">
      </div>
      <div class="navbar-no-avatar" v-else @click="goLogin">
          <span>登录</span>
      </div>
    </div>
    <div class="navbar-center">
        <div class="navbar-serach">
          <input type="text" name="" id=""  v-model="serachText" />
          <span title="搜索" @click="handerSerach"><i class="iconfont icon-31sousuo"></i> </span>
        </div>
    </div>
     <div class="navbar-right">
      <div class="navbar-upload">
          <div class="upload-box" @click="goUpload">
            <span> <i class="iconfont icon-jiahao"></i> </span>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapMutations(['handelSerach']),
    // 跳转登录
    goLogin () {
      this.$router.push({ path: '/login' })
    },
    // 跳转用户页面
    goMyhome () {
      this.$router.push({ path: '/user' })
    },
    // 跳转到上传页面
    goUpload () {
      this.$router.push({ path: '/upload' })
    },
    // 跳转搜索页面
    handerSerach () {
      if (this.serachText === '') {
        console.log(111)
      } else {
        // 将搜索内容存储到公共状态
        this.handelSerach(this.serachText)
        const routeUrl = this.$router.resolve({ path: '/serach/article', query: { serachText: this.serachText } })
        window.open(routeUrl.href, '_blank')
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.navbar{
  width: 10.82rem;
  display: flex;
  height: 1.25rem;
  border-bottom: 1px solid rgb(218, 218, 218);
  // position: ;
  padding: 0 .2rem;
  background:#fff;
  .navbar-left{
    width:1.03rem ;
    height:1.03rem ;
    margin: 0.11rem;
    .navbar-avatar{
      width: 1.03rem;
      height: 1.03rem;
      border-radius: 50%;
      overflow: hidden;
      img{
        width: 1.03rem;
        height: 1.03rem;
        display: inline-block;
      }
    }
    .navbar-no-avatar{
      height: 1.03rem;
      line-height: 1.03rem;
      text-align: center;

      span{
        display: -moz-box;
        color: #f60;
        font-size: .3rem;
      }
    }
  }
  .navbar-center{
    width: 8.4rem;
    // line-height: 1.25rem;
    border-radius: 5px;
    .navbar-serach{
      width: 4.76rem;
      height: 0.6rem;
      border: 1px solid rgb(202, 202, 202);
      border-radius: .3rem;
      overflow: hidden;
      margin: 0.325rem 2rem;
      input{
        width: 4rem;
        height: 0.6rem;
        margin-left: .2rem;
        border: none;
        &:focus{outline:none;}
         &::placeholder {
           color: #d4d4d4;
           }
      }
      span{
        width: .33rem;

        i{
          height: .6rem;
        }
      }

    }
  }
  .navbar-right{
    width:1.03rem ;
    height:1.03rem ;
    padding: 0.11rem;
    .navbar-upload{
      width: 1.03rem;
      height:1.03rem ;
      .upload-box{
        width: .6rem;
        height: .6rem;
        background-image: linear-gradient(100deg, #ff8b00 25%,#ffce00 75%);
        border-radius: 50%;
        margin: .215rem;
        text-align: center;
        span{
          i{
            color: #fff;
            font-weight: 800;
            font-size: .5rem;

          }
        }
      }
    }
  }

}
</style>
